<!--
 * @Descripttion: 目录管理
 * @version: 
 * @Author: 穆宏宇
 * @Date: 2020-11-23 13:56:38
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-24 14:25:25
-->
<!-- 带图片上传 -->
<template>
	<div class="catalogue-manager">
		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="88px">
			<el-row>
				<el-col :span="6">
					<el-form-item label="供应商" prop="supplier">
						<el-select v-model="queryParams.supplierId" placeholder="请选择供应商" filterable clearable
							@change="changeSupplierId">
							<el-option v-for="item in supplierList" :key="item.supplierId"
								:label="item.supplierName + '('+item.count+')'" :value="item.supplierId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="分类" prop="primaryCategory">
						<el-select v-model="queryParams.primaryCategory" placeholder="请选择分类" filterable clearable
							@change="changePrimaryCategory">
							<el-option v-for="item in primaryCategoriesList" :key="item.primaryCategory"
								:label="item.primaryCategoryName + '('+item.count+')'" :value="item.primaryCategory">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="品牌" prop="brandId">
						<el-select v-model="queryParams.brandId" placeholder="请选择品牌" filterable clearable
							@change="changeBrandId">
							<el-option v-for="item in brandsList" :key="item.brandId"
								:label="item.brandName + '('+item.count+')'" :value="item.brandId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="国产进口" prop="isImports">
						<el-select v-model="queryParams.isImports" placeholder="请选择国产进口" filterable clearable
							@change="changeImports">
							<el-option v-for="item in isImportsList" :key="item.name"
								:label="item.name + '('+item.count+')'" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="是否上架" prop="goodsState">
						<el-select v-model="queryParams.goodsState" placeholder="请选择上下架" filterable clearable
							@change="changeState">
							<el-option label="上架" value="PASS"></el-option>
							<el-option label="下架" value="DOWN"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="关键字" prop="keyword">
						<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-form-item style="float: right;">
					<el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
					<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
					<el-button icon="el-icon-up" @click="upItAll">批量上架</el-button>
					<!-- <el-button icon="el-icon-plus" @click="openDialogEdit()">新增</el-button> -->
				</el-form-item>
			</el-row>
		</el-form>

		<el-table :data="tableData" ref="table" style="width: 100%" row-key="id" border :max-height="maxHeightNow"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="50" fixed="left" />
			<el-table-column label="商品名称" prop="goodsName" />
			<el-table-column label="sku" prop="sku" />
			<el-table-column prop="goodsStock" label="库存"  width="100">
				<template slot-scope="scope">
				  <el-input v-model="scope.row.goodsStock" @change="changeStock(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column prop="goodsWeight" label="重量"  width="100">
				<template slot-scope="scope">
				  <el-input v-model="scope.row.goodsWeight" @change="changeStock(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column prop="goodsPrice" label="含税价"  width="100">
				<template slot-scope="scope">
				  <el-input v-model="scope.row.goodsPrice" @change="changeStock(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column prop="initExcludeTaxPrice" label="未税价"  width="100">
				<template slot-scope="scope">
				  <el-input v-model="scope.row.initExcludeTaxPrice" @change="changeStock(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column prop="goodsParam" label="简单配置"  width="100">
				<template slot-scope="scope">
				  <el-input v-model="scope.row.goodsParam" @change="changeStock(scope.row)" />
				</template>
			</el-table-column>
			
			<el-table-column prop="等级" label="等级"  width="100">
				<template slot-scope="scope">
					<el-select v-model="scope.row.grade" @change="changeStock(scope.row)" clearable >
						<el-option label="A" value="A"></el-option>
						<el-option label="B" value="B"></el-option>
						<el-option label="C" value="C"></el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="idMatl" label="物料号"  width="200">
				<template slot-scope="scope">
				  <el-input v-model="scope.row.idMatl" @change="changeStock(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column prop="goodsSource" label="来源"  width="200">
				<template slot-scope="scope">
				  <el-input v-model="scope.row.goodsSource" @change="changeStock(scope.row)" />
				</template>
			</el-table-column>

			<el-table-column label="下架原因" prop="goodsQuesiton" />
			<el-table-column label="供应商" prop="supplierName" />
			<el-table-column label="品牌" prop="brandName" />
			<el-table-column label="一级分类" prop="primaryCategoryName" />
			<el-table-column label="二级分类" prop="secondaryCategoryName" />
			<el-table-column label="三级分类" prop="tertiaryCategoryName" />
			<el-table-column label="国产进口" prop="isImport" />
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="upIt(scope.row)">
						上架
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryParams.currentPage" :page-size="queryParams.pageSize"
			layout=" ->,total, sizes, prev, pager, next, jumper" :total="queryParams.total"></el-pagination>

		<!-- 增改查 -->
		<el-dialog :title="title" :visible.sync="dialogVisible" width="580px">
			<el-form ref="form" :model="form" label-width="110px" :rules="rules" label-suffix=":">

				<el-form-item label="特色专区名称" prop="characteristicName">
					<el-input v-model="form.characteristicName"></el-input>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save()">保 存</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import moment from "moment";

	import tools from "@/tools";

	import {
		searchByDown,
		updateUser
	} from '@/api/admin.api'


	import {
	updateGoodsItem
  } from '@/api/supplier.api';
	export default {
		name: 'catalogue-manager',
		data() {
			return {
				env: process.env.NODE_ENV === 'development' ? 'dev' : 'pro',
				tableData: [],
				dialogVisible: false,
				rules: {
					characteristicName: [{
						required: true,
						trigger: 'blur',
						message: '请输入专区名称'
					}],
					haracteristicImg: [{
						required: true,
						trigger: 'change',
						message: '请选择分类图片'
					}],
				},
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					currentPage: 1,
					supplierId: '',
					primaryCategory: '',
					brandId: '',
					isImports: '',
					keyword: '',
					goodsState:''
				},
				title: '',
				form: {
					characteristicName: '',
					haracteristicImg: ''
				},
				supplierList: [],
				isImportsList: [],
				brandsList: [],
				primaryCategoriesList: [],
				multipleSelection: [],
				ids: []
			}
		},
		computed: {
			// 表格高度
			maxHeightNow() {
				const height = window.innerHeight
				return height - 262
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			changeStock(row){
				var that = this;
				updateGoodsItem({
					id:row.id,
					goodsStock:row.goodsStock,
					agreementPrice:row.goodsPrice,
					goodsPrice:row.goodsPrice,
					initExcludeTaxPrice:row.initExcludeTaxPrice,
					excludeTaxPrice:row.initExcludeTaxPrice,
					goodsWeight:row.goodsWeight,
					goodsParam:row.goodsParam,
					
					grade:row.grade,
					idMatl:row.idMatl,
					goodsSource:row.goodsSource
				}).then(res => {
				  this.$message({
				    type: 'success',
				    message: '操作成功!'
				  });
				  setTimeout(function() {
					  that.getList ()
				  }, 1000);
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.ids = val.map(item => item.id)
				
			},
			upItAll(){
				if(this.ids.length <= 0){
					this.$message({
						type: 'error',
						message: '请选择操作行!'
					});
				}else{
					this.upIt();
				}
			},
			upIt(row) {
				var that = this;
				this.$confirm('上架商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var ids = '';
					if(row && row.id){
						ids = [row.id];
					}else{
						ids = that.ids;
					}
					updateUser({
						id: ids
					}).then(() => {
						this.$message({
							type: 'success',
							message: '上架成功!'
						});
						that.getList()
					})
				})
			},
			changeSupplierId(e) {
				// 供应商
				this.queryParams.supplierId = e;
				this.getList();
			},
			changeState(e) {
				// 供应商
				this.queryParams.goodsState = e;
				this.getList();
			},
			changePrimaryCategory(e) {
				// 分类
				this.queryParams.primaryCategory = e;
				this.getList();
			},
			changeBrandId(e) {
				// 品牌
				this.queryParams.brandId = e;
				this.getList();
			},
			changeImports(e) {
				// 进口国产
				this.queryParams.isImports = e;
				this.getList();
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.queryParams.pageNum = val
				this.getList()
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.currentPage = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			resetForm(formName) {
				this.queryParams = {
						pageNum: 1,
						pageSize: 10,
						currentPage: 1,
						supplierId: '',
						primaryCategory: '',
						brandId: '',
						isImports: '',
						keyword: ''
					},
					this.$refs[formName].resetFields();
			},
			getList() {
				var that = this;
				searchByDown(this.queryParams).then(res => {
					that.tableData = res.products;
					that.queryParams.total = res.total;
					that.supplierList = res.supplier;
					that.primaryCategoriesList = res.primaryCategories;
					that.brandsList = res.brands;
					that.isImportsList = res.isImports;
				})
			},
			openDialogEdit(row) {
				if (row && row.id) {
					this.title = "修改";
					this.form = row;
					this.form.id = row.id;

					this.mainFileList = [{
						name: '',
						url: row.haracteristicImg,
						id: '',
						fileType: 14,
					}];
				} else {
					this.title = "新增";
					this.form = {}
					this.mainFileList = [];
				}

				this.dialogVisible = true
			},
			save() {
				var that = this;
				that.$refs.form.validate((valid) => {
					if (valid) {
						if (that.form.id) {
							editCharacteristicarea(that.form).then(res => {
								if (res.code == 200) {
									that.$message.success("修改成功");
									that.handleQuery();
									that.dialogVisible = false;
								} else {
									that.$message.success("添加失败");
								}
							})
						} else {
							addCharacteristicarea(that.form).then(res => {
								if (res.code == 200) {
									that.$message.success("添加成功");
									that.handleQuery();
									that.dialogVisible = false;
								} else {
									that.$message.success("添加失败");
								}
							})
						}

					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	.catalogue-manager {

		th,
		td,
		tr {
			text-align: left !important;
			padding-left: 40px;
			padding-right: 40px;
		}

		.mb10 {
			margin-bottom: 10px;
		}
	}
</style>
